Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Smooth Motion Streak movement #9693

Merged
merged 1 commit into from Mar 9, 2022
Merged

Smooth Motion Streak movement #9693

merged 1 commit into from Mar 9, 2022

Conversation

jareguo
Copy link
Contributor

@jareguo jareguo commented Nov 21, 2021

Changelog:

  • 在不影响整个组件定位的前提下尽可能优化 Motion Streak 的视觉效果,减少破面、穿帮,突变。

优化的点:

  • 起始面片的平滑出现
  • 修复原先慢慢移动的话,第一个拖尾始终出不来的问题(特别是 minSeg 设大之后)
  • 最后一个面片的平滑消失
  • 移动过程中,拖尾随着时间变短,而不是一节一节消失(旧版也有,但是实现有问题,经常出不来效果)
  • 方向改变时,减少破面的出现概率。原理是在 minSeg 阈值到达前,始终允许前一个定点的方向进行重新变更,减少了方向的改变频率,就减少了频繁微小移动带来的破面(参考视频 old/new 20)

警告:

  • 只测试了 web 平台,模拟器由于硬盘空间不足删掉了跑不了也没测试。请协助测试!

@jareguo
Copy link
Contributor Author

jareguo commented Nov 21, 2021

效果请参考企业微盘 https://drive.weixin.qq.com/s?k=ADcAmwdCAAogJ4I3so
old 代表原来的效果,new 代表新的效果。
可分别对比 old20, new20,以及 old200, new200

}
findLast = true;

normal(_normal, dir);
Copy link
Contributor Author

@jareguo jareguo Nov 21, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TODO:这里直接用法向量做为两个顶点的位置,效果并不是最好的,会有很多线段的交叉
image

比较好的做法是判断线段顶点的距离,确保距离之合最小,一旦发现交叉,交换左右两侧的顶点(位置换,UV 不能换),效果就会好很多。

@@ -61,6 +61,7 @@ var MotionStreak = cc.Class({

ctor () {
this._points = [];
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我是不太能理解渲染数据挂在组件上的行为。
谁使用,就应该谁持有。

@@ -77,6 +77,11 @@ function computeMiter (miter, lineA, lineB, halfThick, maxMultiple) {
}

export default class MotionStreakAssembler extends Assembler2D {
constructor () {
super();
this._tailShortenTime = 0;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

用来计算最后一节拖尾缩短的速度。原有算法不对,导致时灵时不灵。

}
// update head
cur.setPoint(tx, ty);
cur.time = fadeTime + dt;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

只有移动了,才能重新激活拖尾(的时间)。如果不动,拖尾就应该逐渐消失。原先每一帧都重新激活拖尾,会导致最后一节拖尾突然消失。

}
}
else {
this._tailShortenTime = p.time;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

如果 point 数量不足,不缩短拖尾,因为缺少计算出平均速度的变量。会导致移动速度比较慢时,第一节拖尾始终出不来。

@sonic-github
Copy link

不要把开发者当做小白鼠,优化完没有经过测试和验收的吗,看看论坛吧,一堆bug啊啊啊啊啊

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants